<template>
	<view>
		<view class="w100 flex flex_wrap flex_jc mt30">
			<view class="li flex flex_ac" v-for="(item,index) in list">
				<view class="time-box flex flex_ac flex_jc flex_wrap">
					<view class="time fz40 w100 txt_c">{{item.created_hi}}</view>
					<view class="day fz30 col_999 w100 txt_c">{{item.created_day}}</view>
				</view>
				<view class="detail fz30">{{item.detail}}</view>
				<view class="img flex flex_jc">
					<view class="egg eggbg">
						
					</view>
				</view>
			</view>
			<view style="margin-top: 40%;" class="u-empty-area" v-if="list.length==0">
				<u-empty text="记录为空" mode="favor"></u-empty>
			</view>
			<view v-if="list.length>0" class="tips">{{tips}}</view>
		</view>
	</view>
</template>

<script>
	import {getEggList} from "@/api/api"
	export default {
		data() {
			return {
				page:1,
				list:[],
				count:0,
				tips:'数据加载中',
			}
		},
		
		onReachBottom(){
			if(this.list.length>=this.count){
				this.tips = '所有数据加载完成'
			}else{
				this.page += 1
				this.getEggList()
			}
		},
		
		onLoad: function (option) {
			this.getEggList()
		},
		onShow:function(){
			
			
		},
	
		methods:{
			
			getEggList(){
				getEggList(this.page).then(res=>{
					this.count = res.data.total
					var data = res.data.data
					for(var i = 0 ;i<data.length;i++){
						this.list.push(data[i])
					}
					if(this.list.length>=this.count){
						this.tips = '所有数据加载完成'
					}
				})
			},
		}
	}
</script>
<style>
	/* 设置标题字体颜色*/
	.u-navbar__content__title{color: #FFFFFF!important;}
	/*去掉返回按钮 */
	.u-navbar__content__left{display: none!important;}
	.u-transition{width: 100%;height: 100%;}
	page{background-color: #F5F5F5;}
</style>
<style scoped>
	
	.egg{width: 64rpx;height: 80rpx;
		border-radius: 50%/55% 55% 45% 45%;}
		
	.eggbg{background-image: linear-gradient(135deg,
		#d7915b,white,#c75050);
		
	}
	
	.sign .v1{color : #2b2b07;text-shadow: 0 0 10px #f1ee97,0 0 20px #f1ee97,0 0 30px #f1ee97,0 0 40px #f1ee97;z-index: 2;
		padding: 10rpx 20rpx;background: aliceblue;border-radius: 10rpx;box-shadow: 0 2px 6px 0 rgb(0 0 0 / 42%)}
	.li .bg image{width: 100%;height: 100%;}
	.li .bg{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
	.sign{font-size: 40rpx;font-weight: bold;position: relative;}
	.li .detail{margin-left: 30rpx;width: 340rpx;}
	.li .img{width: 80rpx;height: 80rpx;margin-left: 30rpx;}
	.time-box .time{font-weight: bold;}
	.time-box{height: 100rpx;margin-left: 30rpx;width: 170rpx;}
	.li{background-color: #FFFFFF;width: 710rpx;border-radius: 10rpx;padding: 30rpx 0;margin-bottom: 30rpx;}
</style>